<template>
  <div class="sceneView">
    <el-row class="bgGray">
      <el-col :span="2" class="hverCenter">
        <img src="@/assets/images/scene-manage-active.png" />
        <el-button link type="info" @click="toAdd()">新建场景</el-button>
      </el-col>
      <el-col :offset="19" :span="3">
        <el-input
          v-model="scenesFilter"
          class="w-50 m-2"
          suffix-icon="Search"
        />
      </el-col>
    </el-row>
    <el-row class="main">
      <div
        v-for="scene in scenesData"
        :key="scene.sceneId"
        class="item"
        @click="toAdd(scene.sceneId)"
      >
        <!--        <SceneCard :title="scene.sceneName" :picFile="scene.viewImage" :id="scene.id"/>-->
        <div class="sceneCard">
          <el-row class="pointer">
            <div @click.stop="deleteScene(scene.sceneId)">
              <img class="deleteIcon" src="@/assets/images/delete-active.png" />
            </div>
            <el-col :offset="8" :span="8">
              <img :src="scene.viewImage" height="92" />
            </el-col>
          </el-row>
          <el-row>
            <el-col class="textOverflow">
              {{ scene.sceneName }}
            </el-col>
          </el-row>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script setup>
import { computed, onActivated, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { deleteSceneById, getScenes } from "@/services/scene";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
const router = useRouter();

onActivated(() => {
  queryScenes();
});

function toAdd(id) {
  router.push({ name: "PgScene", query: { id } });
}

const data = reactive({
  scenes: [], // 场景数据
  scenesFilter: "", // 场景名称过滤条件
});
const { scenes, scenesFilter } = toRefs(data);

// 根据名称过滤后的场景列表
const scenesData = computed(() => {
  if (scenes.value.length < 1) return;
  const list = scenes.value;
  return list.filter(
    (item) => item.sceneName.indexOf(scenesFilter.value) != -1
  );
});

const queryScenes = async (name) => {
  try {
    const resp = await getScenes({ name });
    scenes.value = resp?.respData || [];
  } catch (e) {
    ElMessage({
      message: e.respMessage,
      type: "error",
    });
  }
};
let store = useStore();
const deleteScene = (id) => {
  store.state.avg = [];
  store.state.historys = [];
  store.state.oldAvg = [];
  ElMessageBox.confirm("是否要删除", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const respData = await deleteSceneById({ id });
      if (respData?.respCode == 200) {
        ElMessage({
          message: respData?.respMessage || "删除成功",
          type: "success",
        });
        queryScenes();
      }
    })
    .catch(() => {});
};

onMounted(() => {
  queryScenes();
});
</script>
<style lang="scss" scoped>
.sceneView {
  width: 100%;

  img {
    width: 25px;
  }

  .hverCenter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .bgGray {
    background-color: #efefef;
    padding: 5px 10px;
  }

  .main {
    width: 100%;
    display: flex;

    .item {
      width: 18%;
      margin: 13px 13px 0 12px;
      flex: 0 0 auto;

      @mixin translation {
        transition: box-shadow 0.6s ease 0s;
      }

      .sceneCard {
        width: 100%;
        padding: 5px;
        border-radius: 12px;
        border: solid 1px #dedede;
        @include translation;

        &:hover {
          box-shadow: 0px 0px 12px #cdcdcd;

          .deleteIcon {
            display: block;
            opacity: 1;
            z-index: 1;
          }
        }

        .deleteIcon {
          z-index: -1;
          opacity: 0;
          position: absolute;
          right: 0;
          top: 0;
          width: 20px;
          transition: opacity 0.6s ease 0s;
        }

        img {
          width: 100px;
        }

        .textOverflow {
          overflow: hidden; // 超出内容隐藏
          text-overflow: ellipsis; // 用省略号来代表被隐藏掉的文本
          white-space: nowrap; // 强制文本在一行显示
          text-align: center;
        }

        .pointer {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
